<template>
  <div class="toph">
    <!-- 2.使用图标 -->
    <el-icon @click="bool">
      <caret-left v-if="store.state.navBool" />
      <caret-right v-else />
    </el-icon>
  </div>
</template>
  <script lang="ts" setup>
// 1.引用图标
import { CaretRight, CaretLeft } from "@element-plus/icons-vue";
import { useStore } from "vuex";
const store = useStore();

const bool = () => {
  store.commit("SET_NAVBOOL");
};
</script>
  <style lang="scss">
.el-header {
  line-height: 60px; //设置图标垂直居中
  display: flex;
  justify-content: space-between;
  .el-icon {
    font-size: 20px; //设置图标大小
  }
}
</style>